<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="shortcut icon"/>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>
    <div class="queryBlock">
        <h3>空气质量监测信息库</h3>
        <lable>按区域查询</lable>
            <select id="districtId" name="districtId">
                <option value="" selected>不限&nbsp;&nbsp;</option>
                <option th:each="district:${districtList}"
                        th:value="${district.id}"
                        th:selected="${district.id == seldistrictId}"
                        th:text="${district.name}"></option>
            </select>&nbsp;
        <input type="button" value="查询"  onclick="queryList()"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a th:href="@{/add/toAddQuality}">添加空气质量信息</a>
        <br /><br />
    </div>
<!--    从数据库取出数据展示在页面上-->
    <div>
        <table border="1">
            <thead>
            <tr>
                <table  border='1' cellspacing='0'>
                    <tr style="text-align: center;background-color: powderblue">
                        <td>序号</td>
                        <td>区域</td>
                        <td>监测时间</td>
                        <td>PM10数据</td>
                        <td>PM2.5数据</td>
                        <td>监测站</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="qualityIndex,qualityIndexStat:${pageInfo.records}">
                        <td th:text="${(pageInfo.current - 1) * pageInfo.size + qualityIndexStat.index + 1}"></td>
<!--                        给区域加超链接-->
                        <td > <a th:href="@{/update/toUpdateQuality(qualityId=${qualityIndex.id})}" th:text="${qualityIndex.name}" /> </td>
                        <td th:text="${#dates.format(qualityIndex.monitorTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${qualityIndex.pm10}"></td>
                        <td th:text="${qualityIndex.pm25}"></td>

                        <td th:text="${qualityIndex.monitoringStation}"></td>
                    </tr>
                    </tbody>
                </table>
    </div>
<!--    分页功能-->
    <div class="pageInfo" th:object="${pageInfo}">
        <span th:text="|总记录数:*{total},每页记录数:*{size},
        当前页:*{current},总页:${pageInfo.getPages()}|">0</span>
        <div>
            <ul class="pageUl">
                <li>
                    <a th:onclick="|toQualityIndexPage('@{/qualityIndex/toFindAll?current=1}')|">首页</a>
                </li>
                <li th:if="${pageInfo.hasPrevious()}">
                    <a th:onclick="|toQualityIndexPage
                        ('@{/qualityIndex/toFindAll(current=${pageInfo.current - 1})}')|">上一页</a>
                </li>
                <li th:each="pageNum:${#numbers.sequence(1, pageInfo.getPages())}">
                    <a th:onclick="|toQualityIndexPage('@{/qualityIndex/toFindAll(current=${pageNum})}')|"
                       th:text="'&nbsp;&nbsp;'+${pageNum}"
                       th:class="${pageNum == pageInfo.getCurrent() ? 'active' : ''}"></a>
                </li>
                <li th:if="${pageInfo.hasNext()}">
                    <a th:onclick="|toQualityIndexPage
                        ('@{/qualityIndex/toFindAll(current=${pageInfo.current + 1})}')|">下一页</a>
                </li>
                <li>
                    <a th:onclick="|toQualityIndexPage
                        ('@{/qualityIndex/toFindAll(current=${pageInfo.getPages()})}')|">尾页</a>
                </li>
            </ul>
        </div>
    </div>
    <style>
        table tr td{
            border: 1px solid gray;
        }
        table tr:nth-child(2n-1){
            background-color: greenyellow;
        }
        ul li{
            float: left;
            list-style: none;
        }
        .pageUl a{
            border: 1px solid black;
            margin: 5px;
        }
        .active{
            font-weight:bold;
            background: grey;
        }
    </style>
    <script>
        function toQualityIndexPage(url){
            let districtId = $("#districtId").val();
            if(districtId){
                url = url + '&districtId=' + districtId;
            }
            window.location.href  = url;
        }
        function queryList(){
            let districtId = $('#districtId').val();
                location.href = "/qualityIndex/toFindAll?districtId="+districtId;
        }
    </script>
</body>
</html>